<template >
  <div>
    <div class="item_header">
      <div class="item_title">cnode</div>
      <div class="item_inut"><input type="text" /></div>
      <div class="item_da" v-for="(item, index) in header" :key="index">
        {{ item }}
      </div>
    </div>

    <div class="list_nav">
      <div
        @click="addIndex(item, index)"
        :class="index === status ? 'color' : 'color_avtive'"
        v-for="(item, index) in nav"
        :key="index"
      >
        {{ item }}
      </div>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="cen">
      <van-list
        class="loading"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in dataList" :key="index">
          <van-card
            :price="item.tab"
            desc="描述信息"
            :title="item.title"
            :thumb="item.author.avatar_url"
          />
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <transition name="fade">
      <div class="top_item" v-show="isSHow" @click="addTop">回到顶部</div>
    </transition>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      header: ["首页", "新手入门", "API", "关于", "注册", "登录"],
      nav: ["全部", "精华", "分享", "问答", "招聘", "客户端测试"],
      loading: false, // 自定义底部加载中提示
      finished: false, // 是否已加载完成   false未完成   true已经完成
      refreshing: false,
      status: 0,
      centent: [],
      dataList: [],
      isSHow: false,
    };
  },
  mounted() {
    axios.get("/list.json").then((res) => {
      var index = res.data.data;

      index.forEach((item) => {
        if (item.tab == "share") {
          item.tab = "招聘";
        } else if (item.tab == "ask") {
          item.tab = "精华";
        }
        this.centent.push(item);
      });
      this.dataList = this.centent;
    });
    window.addEventListener("scroll", this.llll, true);
  },
  methods: {
    // 下拉的时候会触发
    onRefresh() {
      console.log("refreshing", this.refreshing);
      this.finished = false;
      setTimeout(() => {
        this.centent = [];
        axios.get("/list.json").then((res) => {
          res.data.data.forEach((item) => {
            this.centent.push(item);
            this.refreshing = false;
          });
        });
      }, 3000);
    },
    // 上拉加载时会触发
    onLoad() {
      console.log("loading:", this.loading);
      setTimeout(() => {
        axios.get("/list.json").then((res) => {
          res.data.data.forEach((item) => {
            this.centent.push(item);
            this.loading = false;
          });
        });
        if (this.centent.length > 60) {
          this.finished = true;
        }
      }, 3000);
    },
    addIndex(item, index) {
      this.status = index;
      this.dataList = []; // 每次切换之前  别忘记要清空啊
      switch (
        item // 判断每点击一下的名字
      ) {
        case "全部":
          this.dataList = this.centent;
          break;
        case "精华":
          this.centent.forEach((item) => {
            if (item.tab == "精华") {
              this.dataList.push(item);
            }
          });
          break;
        case "招聘":
          this.centent.forEach((item) => {
            if (item.tab == "招聘") {
              this.dataList.push(item);
            }
          });
          break;
        default:
          break;
      }
    },
    llll() {
      var scroll = document.documentElement.scrollTop;
      scroll > 1008 ? (this.isSHow = true) : (this.isSHow = false);
    },
    addTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style scoped>
.list_nav {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  margin-top: 20vh;
  position: fixed;
  top: 37px;
  left: -7px;
  z-index: 99;
  background-color: #fff;
}
.cen {
  margin-top: 30vh;
}
.loading {
  margin-top: 10px;
}

.top_item {
  position: fixed;
  top: 80%;
  left: 72%;
  width: 80px;
  height: 40px;
  border: 1px solid orangered;
  text-align: center;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: white;
  color: #000000;
}
.item_header {
  width: 100%;
  height: 20vh;
  background-color: rgb(68, 68, 68);
  position: fixed;
  top: 40px;
  left: 0px;
  z-index: 999;
}
.item_title {
  color: #fff;
  font-size: 27px;
}

.item_inut > input {
  border: none;
  outline: none;
  width: 150px;
  height: 30px;
  border-radius: 30px;
  background-color: rgb(136, 136, 136);
  text-indent: 2em;
}

.item_da {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin: 0px 8px;
  margin-top: 10px;
}

.color {
  color: red;
  background-color: orange;
}

.color_avtive {
  color: #000;
}
</style>